<template>
  <div class="collect-content">
    <div class="page-title" style="cursor: pointer;">
      <i class="el-icon-arrow-left"></i> 关注店铺
    </div>
    <div class="content"><!---->
      <!--      <div class="el-empty">-->
      <!--        <div class="el-empty__image">-->
      <!--          <no-data />-->
      <!--        </div>-->
      <!--        <div class="el-empty__description"><p>暂无数据</p></div>&lt;!&ndash;&ndash;&gt;-->
      <!--      </div>-->
      <div class="list-content">
        <div class="item">
          <div class="avatar">
            <img src="https://hetao-shop-test.s3.amazonaws.com/selle/2023-11-06/e2e57f13-bf6d-48e0-be0a-1a881b082e8c.jpg" alt="">
          </div>
          <div class="info">
            <div class="name"><p title="11">11</p>
              <button type="button"
                      class="el-button el-button--default el-button--mini is-plain is-round"><!---->
                <!----><span>取消关注</span></button>
            </div>
            <div class="census">
              <div class="number"><p> 已售： 0 </p></div>
              <div class="bottom"><p> 好评率：100% </p>
                <button type="button" class="el-button visiti-btn el-button--default"><!---->
                  <!----><span> 访问商店 </span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="el-loading-mask" style="display: none;">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg><!----></div>
      </div>
    </div><!---->
    <common-pagination :page="1" />
  </div>
</template>
<script setup>
import NoData from "@/components/common/NoData.vue";
import CommonPagination from "@/components/common/CommonPagination.vue";
</script>
<style scoped>
.collect-content {
  width: 775px;
  padding-top: 32px;
  padding-left: 50px
}
.collect-content>.content {
  margin-top: 15px;
  min-height: 120px
}

.collect-content>.content>.list-content {
  overflow: hidden
}

.collect-content>.content>.list-content>.item {
  width: 350px;
  height: 120px;
  padding: 10px;
  font-size: 12px;
  float: left;
  border: 1px solid var(--color-border);
  margin-right: 25px;
  margin-bottom: 20px;
  border-radius: 4px;
  display: flex
}

.collect-content>.content>.list-content>.item:nth-child(2n) {
  margin-right: 0
}

.collect-content>.content>.list-content>.item>.avatar {
  width: 62px;
  height: 62px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center
}

.collect-content>.content>.list-content>.item>.avatar>img {
  width: 100%;
  height: auto
}

.collect-content>.content>.list-content>.item>.info {
  flex: 1;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.collect-content>.content>.list-content>.item>.info>.name {
  display: flex;
  align-items: flex-start
}

.collect-content>.content>.list-content>.item>.info>.name>p {
  flex: 1;
  padding-right: 5px;
  font-size: 14px;
  color: #000;
  line-height: 18px;
  position: relative;
  top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.collect-content>.content>.list-content>.item>.info>.name .el-button--mini {
  padding: 0;
  height: 24px;
  width: 80px
}

.collect-content>.content>.list-content>.item>.info>.census {
  margin-top: 10px;
  font-size: 12px;
  color: #333
}

.collect-content>.content>.list-content>.item>.info>.census>.number {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.collect-content>.content>.list-content>.item>.info>.census>.bottom {
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.collect-content>.content>.list-content>.item>.info>.census .visiti-btn {
  height: 26px;
  background: var(--color-submain1);
  border: 1px solid var(--color-main);
  border-radius: 27px;
  font-size: 12px;
  color: var(--color-main);
  line-height: 0
}

.collect-content>.content>.list-content>.item>.info>.census .visiti-btn:hover {
  border-color: var(--color-submain)
}

</style>